<template>
  <el-form ref="formRef" :model="form"  label-width="120px">
      <el-form-item prop="name" label="分类名称" style="width:92%;">
          <el-input v-model="form.name" placeholder="请填写名称" />
      </el-form-item>
      <el-form-item label="分类级别">
          <el-radio-group v-model="showMore" >
                       

          <el-radio :label="true" :disabled="form.id!==0 && !form.pid">
              二级分类
          </el-radio>
          <el-radio :label="false" :disabled="form.id!==0 && !form.pid">
              一级分类
          </el-radio>

          </el-radio-group>
      </el-form-item>
      <el-form-item v-show="showMore" label="上级分类" prop="pid">
          <el-select v-model="form.pid" placeholder="请选择上级分类名称">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
          </el-select>
      </el-form-item> 
    
      <el-form-item>

          <el-button type="primary" @click="editSubmit" v-if="id">修改</el-button>
          <el-button type="primary" @click="addSubmit" v-else>添加</el-button>
          <el-button @click="btnCancel">重置</el-button>

      </el-form-item>
  </el-form>
</template>
<script setup>

import {getCategoryList,getCategory,addCategory,editCategory} from '../api/api';
import { reactive } from 'vue';
import { ref,onMounted} from 'vue';
import useToken from '../stores/token';

// const props=defineProps({
//   id:{
//     type:Number
//   }
// })

// const form=reactive({
//   id:props.id,
//   name:'',
//   pid:'', 
//   picture:''
// })

// const categoryList=ref([])
// const showMore=ref(false)
// const emit=defineEmits(['success'])
// onMounted(()=>{
//   loadCategory()
// })
// const loadCategory=async () =>{
//   if(form.id){
//     const data=await getCategory({id:form.id}) //获取当前的数据
//     Object.assign(form,data)  //回写
//   }
//   const list = await getCategoryList()  //获取全部数据
//   categoryList.value=list.filter(item=>item.pid==0) //过滤一级分类数据
//   showMore.value=form.pid!=0   //设置showMore值的判定条件 控制分类级别
//   // 布尔值
// }
// const formRef=ref() 
// const btnCancel=()=>{
//     formRef.value.resetFields()

//     loadCategory()
// }
// const resetForm=id=>{
//     form.id=id
//     btnCancel()
// }
// defineExpose({resetForm})
// // 添加
// const addSubmit= async()=>{
//   const data={
//     name:form.name,
//     pid:form.pid,
//     picture:form.picture
    
//   }
//   if(await addCategory(data)){
//      emit('success')
//   }
// }
// // 编辑
// const  editSubmit=async()=>{
//   if(await editCategory(form)){
//     emit('success')
//   }
// }
const props=defineProps({
    id:{type:Number}
})
const form=reactive({
    id:props.id,
    pid:'',
    name:'',
    picture:''
})
const categoryList=ref()
let showMore=ref(false)
onMounted(()=>{
    loadCategory()
}
  
)

const loadCategory=async()=>{
    if(form.id){
        const data=await getCategory({id:form.id})
        Object.assign(form,data)
    }
    const list=await getCategoryList()
    categoryList.value=list.filter(item=>item.pid==0)
    showMore=form.pid!=0
}


//传
//重置
const formRef=ref()
const btnCancel=()=>{
    formRef.value.resetFields()
    loadCategory()
}
const resetForm=id=>{
    form.id=id
    btnCancel()
}
defineExpose({resetForm})

//
const emit=defineEmits(['success'])


// add

const addSubmit=async()=>{
    const data={
        name:form.name,

        pid:form.pid,
        picture:form.picture
    }
    if(await addCategory(data)){
        emit('success')
    }
}

const editSubmit=async()=>{
   
    if(await editCategory(form)){
        emit('success')
    }
}
</script>
<style scoped>
.upload-demo {
    text-align: left;
    width: 91%;
}
</style>
